<template>
  <el-card class="order-container">
    <template #header>
      <div class="header">
        <div class="search">
          <el-input
            style="width: 200px; margin-right: 10px"
            v-model="params.title"
            placeholder="名称搜索"
            :style="{width: '240px'}"
            @clear="getList"
            clearable>
            <template #prepend>关键词</template>
          </el-input>
          <el-button type="primary" @click="getList">搜索</el-button>
        </div>
        <el-button-group>
          <el-button type="primary" @click="dialog(0)">创建</el-button>
        </el-button-group>
      </div>
    </template>
    <el-table
      class="table-row-optimize"
      v-loading="state.loading"
      :data="state.tableData"
      tooltip-effect="dark">
      <el-table-column v-viewer label="" width="125">
        <template #default="scope">
          <img :src="scope.row.master" :alt="scope.row.title"
            @click="preview(scope.row)"
            width="100" height="60" style="border-radius: 5px;">
        </template>
      </el-table-column>
      <el-table-column prop="title" label="活动名称"/>
      <el-table-column prop="address" label="活动地址"/>
      <el-table-column label="状态" width="130" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 10" type="info">待开放</el-tag>
          <el-tag v-if="scope.row.status === 20" type="success">进行中</el-tag>
          <el-tag v-if="scope.row.status === 30" type="danger">已结束</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="加入人数" width="100" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.member.length === 0">{{ scope.row.number }}</el-tag>
          <!-- 触发方式：trigger=hover|click -->
          <el-popover v-else effect="light" trigger="hover" placement="right" width="auto">
            <template #reference>
              <el-tag>{{ scope.row.number }}</el-tag>
            </template>
            <el-table :data="scope.row.member">
              <el-table-column property="realname" label="姓名"/>
              <el-table-column width="120" property="phone" label="手机号"/>
              <el-table-column width="140" property="wechat" label="微信号"/>
              <el-table-column width="120" label="加入日期">
                <template #default="scope">
                  {{ toDate(scope.row.created_at) }}
                </template>
              </el-table-column>
            </el-table>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center">
        <template #default="scope">
          {{ toDateTime(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button-group>
            <el-button type="warning" @click="dialog(scope.row.id)">编辑</el-button>
            <el-button type="danger" @click="deleted(scope.row.id)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!--总数超过一页，再展示分页器-->
    <el-pagination
      background
      layout="prev, pager, next, jumper"
      :total="state.total"
      :page-size="params.limit"
      :current-page="params.page"
      @current-change="changePage"
    />
  </el-card>

  <dialog-maker-activity ref="refMakerActivity" :reload="getList"/>

  <!-- Image Preview -->
  <viewer :images="images">
    <img v-for="src in images" :key="src" :src="src">
  </viewer>

</template>

<script setup>
import { toDate, toDateTime } from "../../utils";
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import DialogMakerActivity from "../../components/DialogMakerActivity.vue";
import { AdminMakerActivityDelete, AdminMakerActivityList } from "../../api/server/maker/activity";
import crud from '../../utils/crud'

const { proxy } = getCurrentInstance()
const images = ref([])
const refMakerActivity = ref(null)
const state = reactive({
  loading: false,
  tableData: [],
  total: 0,
  selectedIds: [],
})

const params = reactive({
  page: 1,
  limit: 10,
  title: '',
})

onMounted(() => {
  getList()
})

const getList = async (page) => {
  page && (params.page = page)
  state.loading = true
  const { data, current_page, total } = await AdminMakerActivityList(params)
  state.tableData = data
  state.total = total
  params.page = current_page
  state.loading = false
}

const preview = row => proxy.$viewerApi({ images: [row.master] })
const changePage = page => getList(page)
const dialog = id => refMakerActivity.value.open(id)
const deleted = row => crud.delete(AdminMakerActivityDelete, row, [], getList)

</script>

<style scoped>

</style>
